<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Glassmorphism | Magic Line Indicator 4</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <ul>
        <li><a href="#"><ion-icon name="accessibility-outline"></ion-icon></a></li>
        <li><a href="./9x9/9x9index.html"><ion-icon name="calculator-outline"></ion-icon></a></li>
        <li class="active"><a href="./chess/chessindex.html"><ion-icon name="apps-outline"></ion-icon></a></li>
        <li><a href="#"><ion-icon name="chatbubble-outline"></ion-icon></a></li>
        <div id="marker"></div>
    </ul> 
    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ionicons.com/">

    <div class="cardbox">
        <div class="card">
            <div class="imgBx">
                <img src="img.png">
            </div>
            <div class="content">
                <div class="details">
                    <h2>王一然<br><span>2020级物院</span></h2>
                    <div class="data">
                        <h3>联络方式：</h3>
                        <div class="datas">QQ: <span>125369047</span> <br>邮箱: <span>ansnacks@yeah.net</span> </div>
                    </div>
                </div>
            </div>
        </div> 
    </div>
    <script>
        let marker = document.querySelector('#marker');
        let list = document.querySelectorAll('ul li');

        function moveIndicator(e){
            marker.style.top = e.offsetTop+'px';
            marker.style.width = e.offsetWidth+'px';
        }

        list.forEach(link => {
            link.addEventListener('mousemove', (e) => {
                moveIndicator(e.target);
            })
        })

        // add active class in hovered list item
       function activeLink(){
        list.forEach((item) =>
        item.classList.remove('active'));
        this.classList.add('active');
       }

       list.forEach((item) =>
       item.addEventListener('mouseover', activeLink));
    </script>
</body>
</html>